<template>
  <div style="height:100%;">

    <div class="tableTittle" v-if="flag !='look'">
      <div><span class="fontImpact">2</span><span>核查列表</span></div>
      <el-button type="primary" size="mini" style="float:right;" @click="downLoad" v-if="flag == 'edit' && $parent.userOpernation.download.display">下载模板</el-button>
    </div>

    <div class="penalrow selectw100" v-if="flag =='look'">
      <div class="inlineblock verticalmiddle infoitem">
        <div class="inlineblock verticalmiddle">
          开始日期
        </div>
        <div class="inlineblock verticalmiddle informationItem">
          <el-date-picker size="mini" v-model="demand.bTime" type="date" placeholder="选择起始日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd"
            style="width:100%;" @change="doSearch">
          </el-date-picker>
        </div>
      </div>
      <div class="inlineblock verticalmiddle infoitem">
        <div class="inlineblock verticalmiddle">
          结束日期
        </div>
        <div class="inlineblock verticalmiddle informationItem">
          <el-date-picker size="mini" v-model="demand.eTime" type="date" placeholder="选择结束日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd"
            style="width:100%;" @change="doSearch">
          </el-date-picker>
        </div>
      </div>
      <el-button type="warning" size="mini" @click="doSearch" class="searchIcon">搜索</el-button>
    </div>

    <div style="height:calc(100% - 40px);">

      <el-table :data="tableData" style="width: 100%;height:calc(100% - 40px)" class="tableCon" size="mini" key="tableData">
        <el-table-column label="序号" min-width="50px">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>


        <el-table-column property="executorName" label="核查人" min-width="100px">
        </el-table-column>
        <el-table-column property="planName" label="计划名称" min-width="100px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column property="status" label="状态" min-width="100px" :formatter = "fomatterStatus">
        </el-table-column>
        <el-table-column property="executeDate" v-if="flag != 'edit'" key="executeDate" label="核查日期" min-width="100px">
          <template slot-scope="scope">
            {{scope.row.hasOwnProperty('executeDate')?scope.row.executeDate.split(' ')[0]:'---'}}
          </template>
        </el-table-column>
        <el-table-column property="createTime" key="date" label="创建日期" min-width="145px">
          <template slot-scope="scope">
            {{scope.row.hasOwnProperty('createTime')?scope.row.createTime.split('.')[0]:'---'}}
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="100px" v-if="flag == 'edit'">
          <template slot-scope="scope">
            <el-button size="mini" @click="qjhcttc('shenhe',scope)" type="text" v-if="scope.row.isApprove">审核</el-button>
            <el-button size="mini" type="text" @click="qjhcttc('edit',scope)" v-if="(scope.row.status == '311' || scope.row.status == '4') && $parent.userOpernation.update.display" :disabled = "!scope.row.display">执行</el-button>
            <el-button size="mini" type="text" @click="qjhcttc('look',scope)" v-if="scope.row.status != '311' && $parent.userOpernation.select.display">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100px" v-if="flag == 'look'">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="giveUp(scope.row)" v-if="(scope.row.status == '311' || scope.row.status == '312') && $parent.$parent.$parent.$parent.userOpernation.giveup.display">废弃</el-button>
            <el-button size="mini" type="text" @click="qjhcttc('look',scope)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block changepages" v-if="flag == 'look'">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="readQuery.page" :page-sizes="[20, 30, 40]"
          :page-size="readQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
        </el-pagination>
      </div>
      <down-load :addAppdShow.sync="addAppdShow"></down-load>
    </div>
    <div v-if="qjhcjiluShow">
      <qjhcjilu :flag="qjhcjiluFlag" :eqid="periodCheckRecordData.equipmentId" :detailList.sync="detailList" :periodCheckRecordData = "periodCheckRecordData"></qjhcjilu>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import downLoad from './page/downLoadDialog.vue'
  import qjhcjilu from './page/qjhcjilu.vue'
  export default {
    components: {
      qjhcjilu,
      downLoad
    },
    props: { periodCheckRecordData: Object, flag: String },
    data() {
      return {
        addAppdShow: false,
        qjhcshenpiFlag: '',
        qjhcshenpiShow: false,
        dateArr: [],
        qjhcjiluShow: false,
        qjhcjiluFlag: '',
        detailShow: false,
        page: 1,
        status: '',
        // 待核查 311
        // 待审核 312
        // 已核查 313
        // 已废弃 5
        // 已驳回 4
        statusOptions: [
					{
						label: '待核查',
						value: 311
					},
					{
						label: '待审核',
						value: 312
					},
					{
						label: '已核查',
						value: 313
					},
					{
						label: '已废弃',
						value: 5
					},
					{
						label: '已驳回',
						value: 4
					}
				],
        demand: {
          equipmentId: '',
          maintainType: 'MA03',
          bTime: '',
          eTime: '',
          status: 311
        },
        tableData: [],
        detailList: [],
        readQuery: {
          page: 1,
          pageCount: 20,
        },
        rowNumber: 0,

      }
    },
    computed: {
      ...mapState(['daibanItem', 'daibanItemShow']),
      tabDivHeight() {
        return (window.innerHeight - 460)
      }
    },
    created() {
      if (this.daibanItemShow) {
        this.qjhcttc('shenhe', { row: this.daibanItem })
        this.$store.commit('passDaibanItemShow', false)
      }

    },
    watch: {
      daibanItem(newer, older) {
        if (this.daibanItemShow) {
          this.qjhcttc('shenhe', { row: this.daibanItem })
          this.$store.commit('passDaibanItemShow', false)
        }
      },
      readQuery: {
				handler(val, oldVal) {
					this.init()
				},
				deep: true
			},

    },
    mounted() {
      this.periodCheckRecordData.equipmentId = this.periodCheckRecordData.equipmentId
      this.init()
    },

    methods: {
      fomatterStatus(row, column, cellValue){
        return this.util.changeStatus({ cellValue: cellValue, list: this.statusOptions })
      },
      //模板下载按钮
      downLoad() {
        this.addAppdShow = true;
      },
      //	查看详情接口
      readMaintenanceRecord(id) {
        return new Promise((resolve, reject) => {
          this.$http({
            apiUrl: 'resource/readMaintenanceRecord.htm',
            method: 'post',
            params: { id: id },
            isJson: false
          }).then(res => {
            if (res.code === 0) {
              resolve(res)

            }
          })
        })

      },
      qjhcttc(flag, scope) {
        if (!!scope) {
          this.readMaintenanceRecord(scope.row.id).then(res => {
            if (flag == 'look' || flag == 'shenhe') {
              this.detailList = res.data
              this.detailList.id = scope.row.id,
                this.qjhcjiluShow = true;
              this.qjhcjiluFlag = flag;
            } else if (flag == 'edit') {
              console.log(res.data)

              this.detailList = {
                id: scope.row.id,
                equipmentId: res.data.equipmentId,
                maintainType: 'MA03',
                executor: res.data.executor,
                executeDate: res.data.executeDate,
                name: res.data.name,
                status:res.data.status,
                // "remark": res.data.remark || "",
              }
              if(res.data.status == 4){
                this.detailList.files = res.data.fileList;
                this.detailList.assignercode = res.data.assignercode;
              }
              this.qjhcjiluShow = true;
              this.qjhcjiluFlag = flag;
            }
          })
        } else if (flag == 'new') {
          this.qjhcjiluShow = true;
          this.qjhcjiluFlag = flag;
          this.detailList = {
            maintainType: 'MA03',
            executor: '',
            executeDate: this.util.date(),
            files: ''
          }

        }

      },
      search() {
        if (!!this.dateArr) {
          this.demand.bTime = this.dateArr[0];
          this.demand.eTime = this.dateArr[1];
        } else {
          this.demand.bTime = '';
          this.demand.eTime = '';
        }
        this.init()
      },
      doSearch() {
				this.readQuery.page = 1;
				this.init()
			},
      giveUp(row){
        // /giveupMaintenRecord.htm
        this.$confirm('是否废弃', '提示', {
        	confirmButtonText: '确定',
        	cancelButtonText: '取消',
        	type: 'warning'
        }).then(() => {
          this.$http({
          	apiUrl: 'resource/giveupMaintenRecord.htm',
          	method: 'post',
          	params: row,
          	isJson: true
          }).then(res => {
          	if (res.code === 0) {
                this.$notify({
                	type:"warning",
                	title:"警告",
                	message:"废弃成功",
                })
                this.init()
          	}
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });


      },
      init() {
        this.demand.equipmentId = this.periodCheckRecordData.equipmentId

        let url;
        if (this.flag == 'look') {
          url = 'resource/getMaintenanceRecordList.htm'
          this.demand.equipmentId = this.periodCheckRecordData.id
          this.demand.status = 313
          this.demand.page = this.readQuery.page
					this.demand.pageCount = this.readQuery.pageCount
        } else {
          url = 'resource/readMaintenanceListed.htm'
          if(this.periodCheckRecordData.equipmentId == undefined){
						return;
					}else{
            this.demand.equipmentId = this.periodCheckRecordData.equipmentId
            this.demand.status = this.periodCheckRecordData.status
          }

        }
        this.$http({
          apiUrl: url,
          method: 'post',
          params: this.demand,
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data
            this.pageinfo = res.pageinfo
            if (this.flag == 'look') {
							if (!res.pageinfo) {
								this.rowNumber = 0;
							} else if (res.pageinfo && !res.pageinfo.rowNumber) {
								this.rowNumber = 0;
							} else {
								this.rowNumber = res.pageinfo.rowNumber;
							}
						}
          }
        })
      },
      detail() {
        this.detailShow = true
      },
      handleSizeChange(val) {
				this.readQuery.pageCount = val;
			},
			handleCurrentChange(val) {
				this.readQuery.page = val;
			},
    }
  }

</script>

<style>

</style>
